import React from 'react';
import { Card, Space } from 'antd';
import Link from 'components/ZLink'
import CreateDB from './createDB';
import Operation from './operation'

const tabList = [
    {
        key: 'createDB',
        tab: '创建数据库'
    },
    {
        key: 'operation',
        tab: '增删改查'
    }
]
export default () => {
    const [activeKey, setActiveKey] = React.useState('createDB')
    
    const tabComponentList: any = {
        createDB: <CreateDB />,
        operation: <Operation />
    }
    return (
        <Space direction="vertical" size={20} style={{ width: '100%'}}>
            <Card title="相关链接">
                <Link href="http://www.ruanyifeng.com/blog/2018/07/indexeddb.html" label="浏览器数据库 IndexedDB 入门教程" />
                <Link href="https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API/Using_IndexedDB" label="MDN" />
            </Card>
            <Card title="注意事项">
                <div>indexDB.open不能调用两次</div>
                <div>创建表只能在upgradeneeded中进行</div>
            </Card>
            <Card
                tabList={tabList}
                activeTabKey={activeKey}
                onTabChange={key => setActiveKey(key)}
            >
                {tabComponentList[activeKey]}
            </Card>

        </Space>
    )
}